<script setup lang='ts'>
import { ref, reactive } from 'vue'
import axios from 'axios'
// const account = ref('ceshi01')
// const pwd = ref('123456')

const loginForm = reactive<{
    account: string,
    password: string
}>({
    account: 'ceshi02',
    password: '123456'
})
const login = async () => {
    if (loginForm.account && loginForm.password) {
        // if (account.value && pwd.value) {
        // const res = await axios.post('https://meikou-api.itheima.net/login', {
        //     account: account.value,
        //     password: pwd.value
        // })
        const res = await axios.post('https://meikou-api.itheima.net/login', loginForm)
        alert(JSON.stringify(res.data))
    } else {
        alert('账号或密码不能为空')
    }
}
</script>

<template>
    <div class="container">
        <div class="login_form">
            <input placeholder="请输入用户名" type="text" v-model="loginForm.account">
            <input placeholder="请输入密码" type="password" v-model="loginForm.password">
            <!-- <input placeholder="请输入用户名" type="text" v-model="account">
            <input placeholder="请输入密码" type="password" v-model="pwd"> -->
            <button @click="login">登录</button>
        </div>
    </div>
</template>

<style scoped>
.container {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container .login_form {
    width: 400px;
    height: 300px;
    background-color: pink;
    box-sizing: border-box;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.login_form input,
button {
    margin: 10px 0;
    width: 100%;
    height: 40px;
    padding: 0 20px;
    box-sizing: border-box;
}
</style>